<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大</title>
		<style>
			#box{
				width: 350px;
				height: 350px;
				border: 1px solid #ccc;
				position: relative;
			}
			#bigbox{
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0;
				left: 360px;
				border: 1px solid #ccc;
				overflow: hidden;
				display: none;
			}
			#mask{
				width: 175px;
				height: 175px;
				background: rgba(225,225,0,0.4);
				position: absolute;
				top: 0;
				left: 0;
				cursor: move;
				display: none;
			}
			#bigImg{
				position: absolute;
			}
		</style>
	</head>
	<body>
	<div id="box">
		
		<img src="small.jpg">
		<div id="mask"><div>
			
		</div>
		<div id="bigbox">
			<img id="bigImg" src="big.jpg"/>
		</div>	
		</div>
	<script>
		function $(obj){
			//1、鼠标经过小盒子：显示遮罩和大图
			//鼠标移入事件
			
			return document.getElementById(obj);
		}
			$('box').onmouseover=function(){
				$('mask').style.display='block';
				$('bigbox').style.display='block';
			}
		$('box').onmouseleave=function(){
			$('mask').style.display='none';
			$('bigbox').style.display='none';
		}
		$('box').onmousemove=function(){
			//获取鼠标位置
		var pageX=event.pageX;
		var pageY=event.pageY;
	
//设置遮罩显示位置
var maskX=pageX-$('mask').offsetWidth/2;
var maskY=pageX-$('mask').offsetHeight/2;
//设置遮罩显示位置

//考虑遮罩可移动范围
if(maskX<0){
	maskX=0
}
if(maskY<0){
	maskY=0
}

if(maskX>$('box').offsetWidth-$('mask').offsetWidth){
	maskX=$('box').offsetWidth-$('mask').offsetWidth;
}

if(maskY>$('box').offsetHeight-$('mask').offsetHeight){
	maskY=$('box').offsetHeight-$('mask').offsetHeight;
}



$('mask').style.left=maskX+'px';
$('mask').style.top=maskY+'px';
		
		//设置遮罩显示 位置
	var bigImgTomove=$('bigImg').offsetWidth-$('bigbox').offsetWidth;
	var maskToMove=$('Box').offsetWidth-$('mask').offsetWidth;
		var rate=bigImgTomove/maskToMove;
		$('bigImg').style.left=-rate*maskX+'px';
		$('bigImg').style.top==rate*maskY+'px';
	}
	</script>
	</body>
</html>
